<template>
  <k-form-modal
    drawer
    center
    width="650px"
    title="商品信息"
    label-width="82px"
    v-bind="formModalState"
    :show-confirm-btn="false"
    cancel-text="关闭"
    v-on="formModalEvent"
  >
    <div class="title">商品信息</div>
    <el-form-item label="商品链接">
      <div class="base-text-ellipsis">{{ rowData.url }}</div>
    </el-form-item>
    <el-form-item label="店铺">
      {{ rowData.shop_name }}
    </el-form-item>
    <el-form-item label="商品ID">
      {{ rowData.product_id }}
    </el-form-item>
    <el-form-item label="商品标题">
      <div class="base-text-ellipsis">{{ rowData.title }}</div>
    </el-form-item>
    <el-form-item label="商品主图">
      <div v-for="(item, index) in rowData.images" :key="index" class="img-box">
        <el-image fit="contain" :src="item" class="img" />
      </div>
    </el-form-item>
    <el-form-item label="商品价格">
      {{ formatPriceCent(rowData.price ?? 0) }}
    </el-form-item>
    <el-form-item label="公开佣金">
      {{ rowData.cos_ratio * 100 + '%' }}
    </el-form-item>
    <el-form-item label="掘金佣金">
      {{ rowData.colonel_cos_ratio * 100 + '%' }}
    </el-form-item>
    <el-form-item label="商品状态">
      {{ rowData.status === 1 ? '上架中' : (rowData.status === 2 ? '已下架' : (rowData.status === 3 ? '已失效' : '' )) }}
    </el-form-item>
    <el-form-item label="被加达人数">
      {{ rowData.shop_count }}
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue';
import { useFormModal } from '@crud/index';
import { formatPriceCent } from '@/utils';
defineOptions({
  name: 'KgjJuejinDetailModal'
});
const rowData = ref<Record<string, any>>({});

const { formModalState, formModalEvent, ...methods } = useFormModal({
  model: { },
  rules: {},
  onShow: (mode = 0, data: any) => {
    rowData.value = data;
  }

});
defineExpose({
  show: methods.show
});
</script>
<style scoped lang="scss">

.title {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.img-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .img {
    width: 120px;
    height: 120px;
    margin: 0 10px 10px;
    background-color: #f1f1f1;
  }
}
</style>
